<template>
  <div class="waic">
    <header class="tou">
      <van-search show-action placeholder="请输入搜索关键词">
        <template #left>
          CSDN
        </template>
        <template #action>
          <button style="color: orange;border-radius: 25px;border: 1px solid orange;background: white;">打开APP</button>
        </template>
      </van-search>
    </header>
  </div>
  <main class="zhong">
    <div class="main">
      <ul>
        <li>关注</li>
        <li id="tj">推荐</li>
        <li>资讯</li>
        <li>热榜</li>
        <li>动态</li>
        <li>有红包</li>
      </ul>
    </div>
    <div class="xia">
      <dl>
        <dt>安装XRDP远程桌面服务</dt>
        <dd><img src="./assets/01.png" alt=""></dd>
        <p style="color: #ccc;">287阅读·0评论</p>
      </dl>
      <dl>
        <dt>安装XRDP远程桌面服务</dt>
        <dd><img src="./assets/01.png" alt=""></dd>
        <p style="color: #ccc;">287阅读·0评论</p>
      </dl>
      <dl>
        <dt>安装XRDP远程桌面服务</dt>
        <dd><img src="./assets/01.png" alt=""></dd>
        <p style="color: #ccc;">287阅读·0评论</p>
      </dl>
      <dl>
        <dt>安装XRDP远程桌面服务</dt>
        <dd><img src="./assets/01.png" alt=""></dd>
        <p style="color: #ccc;">287阅读·0评论</p>
      </dl>
    </div>
  </main>
</template>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.waic {
  display: flex;
  flex-direction: column;
  .tou {
    height: 50px;
    line-height: 50px;
    background: red;
  }
}
.zhong {
  height: 50px;
  line-height: 50px;
  background: #eee;
  .main ul{
    margin-top: 10px;
    float: left;
  }
  .main ul li{
    float: left;
    margin-left: 20px;
    color: #ccc;
  }
  #tj{
    color: black;
  }
}
.xia{
  float: left;
  dl{
    width: 370px;
    height: 130px;
    border-bottom: 1px solid #cccc;
    margin-top: 10px;
  }
  dl dd{
    float: right;
    margin-top: -50px;
  }
  dl dd img{
    width: 100px;
    height: 100px;
  }
}
</style>
